<!--
 * @FilePath     : /study_code/layui/13-2-18.html
 * @Description  : defaultToolbar 自定义 table头部工具栏 右侧图标
 * @Date         : 2025-04-07 17:14:25
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 14:26:55
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="demo" lay-filter="test"></table>

    <script src="/layui/dist/layui.js"></script>
    <script src="/layui/table/common.js"></script>
    <script>
      var table = layui.table,
        $ = layui.$

      table.render({
        elem: '#demo',
        cols: cols,
        data: tableData,

        /**
         * @key defaultToolbar
         * @brief: 头部工具栏右侧图标
         * @前提：toolbar: ture
         * @value {array} 配置数组 & 参数对象
         * （1）默认；
         *    ['filter', 'exports', 'print'] （此时是 筛选、导出、打印图标）
         * （2）自定义顺序；
         *    ['exports' , 'filter' , 'print'] （此时就是 导出、筛选、打印 图标）
         * （3）自定义配置对象；
         *    [
         *      // 是配置对象时
         *      {
         *         title: '提示', // 标题
         *         name: 'tips', // name
         *         layEvent: 'LAYTABLE_TIPS', // 事件标识
         *         icon: 'layui-icon-tips', // 图标 className
         *         onClick: function(obj) { // 点击事件 - 2.9.12+
         *            console.log(obj) // 查看返回的对象成员
         *          }
         *      },
         *      {} // 可无限添加
         *    ]
         * (4) 自定义重写
         *    v2.9.12+ 新增 “重写内置工具”，
         *    例如：
         */

        toolbar: true,

        /* //  示例1：默认工具栏-右侧图标
        defaultToolbar: ['filter', 'exports', 'print'], // 筛选、导出、打印 */

        /* // 示例2：自定义顺序
        defaultToolbar: ['exports' , 'filter' , 'print'], // 导出、筛选、打印 */

        // 示例3：自定义 扩展
        defaultToolbar: [
          'exports',
          'filter',
          'print',
          // 扩展项
          {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips',
          },
        ], // （无限）可自定义图标

        /*
        示例4：自定义重写
        前提：导入 sheetjs；（上面的 script 标签内导入的 cdn）
        */
        /* defaultToolbar: [
          'filter',
          {
            name: 'exports',
            onClick: function (obj) {
              // 获得数据并清除临时字段
              var data = table.clearCacheKey(obj.data)
              console.log(1, '获取表格的数据？', data, typeof data)
              var dataList = []
              for (var item in data) {
                // console.log(2, '子项', item)
                dataList.push(data[item])
              }
              // 当前示例配置项
              var options = obj.config
              // 弹出面板
              obj.openPanel({
                list: [
                  // 列表
                  '<li data-type="csv">导出 CSV 文件</li>',
                  '<li data-type="xlsx">导出 XLSX 文件</li>',
                ].join(''),
                done: function (panel, list) {
                  // 操作列表
                  list.on('click', function () {
                    var type = $(this).data('type')
                    if (type === 'csv') {
                      // 调用内置导出方法
                      table.exportFile(options.id, null, type)
                    } else if (type === 'xlsx') {
                      // 自助处理导出 - 如借助 sheetjs 库或服务端导出
                      console.log(3, 'xlsx 导出操作')
                      // …
                      const wb = XLSX.utils.book_new() // 工作簿
                      const ws = XLSX.utils.json_to_sheet(dataList) // 工作表
                      XLSX.utils.book_append_sheet(wb, ws, '小区业主记录')
                      XLSX.writeFile(wb, 'exported_data.xlsx')
                    }
                  })
                },
              })
            },
          },
          'print',
        ], */
      })

      // 示例3对应的事件监听？
      /**
       * @brief: 头部工具栏事件监听
       * @param {*} 'toolbar(filter)'
       *    toolbar 监听的事件类型；
       *    filter 表格 lay-filter 属性的值；
       * @param {*} callback(obj)
       *    回调参数：obj 事件触发时的参数对象
       *      config字段：表格渲染的配置项；
       *      event字段：事件名称；
       * @return {*}
       */
      table.on('toolbar(test)', function (obj) {
        //
        var layEvent = obj.event
        console.log('触发?', obj)
        if (layEvent === 'LAYTABLE_TIPS') {
          alert('当前是 用户积分表')
        }
      })
    </script>
  </body>
</html>